<template>
	<div class="h-100 position-relative" v-loading.fullscreen.lock="fullscreenLoading">
		<el-tabs v-model="activeName" class="d-flex flex-column h-100">
			<el-tab-pane label="角色列表" name="first" class="d-flex flex-column h-100">
				<div class="search w-25">
					<el-input placeholder="请输入内容" size="small" v-model="searchRole">
						<el-button slot="append" type="primary" icon="el-icon-search"></el-button>
					</el-input>
				</div>
				<div class="table_list">
					<el-table :data="tableData" stripe style="width: 100%" size="small">
						<el-table-column type="index" width="50"></el-table-column>
						<el-table-column prop="roleCode" label="角色编号"></el-table-column>
                        <el-table-column prop="roleName" label="角色名称"></el-table-column>
                        <el-table-column prop="roleType" label="角色类型"></el-table-column>
						<el-table-column label="操作" width="300">
							<template slot-scope="scope">
								<el-button size="mini" :disabled="checkPermission(2)" @click="handleToEdit(scope.row)">编辑名称</el-button>
                                <el-button size="mini" :disabled="checkPermission(2)" @click="handleToPermission(scope.row)">编辑权限</el-button>
								<el-button size="mini" :disabled="checkPermission(1)" type="danger" @click="handleToDelete(scope.row, scope.$index)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- <el-pagination class="pagination pt-2 pb-2 justify-content-end" background layout="prev, pager, next"
					:total="1000"></el-pagination> -->
			</el-tab-pane>
		</el-tabs>

		<el-button type="primary" class="position-absolute addFlat" size="small" icon="el-icon-plus"
			@click="dialogNewRoleVisible=true" :disabled="checkPermission(0)">添加角色</el-button>

		<el-dialog title="添加角色" :visible.sync="dialogNewRoleVisible" width="500px" append-to-body>
			<el-input placeholder="请输入角色名称" v-model="newRoleName"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogNewRoleVisible = false">取 消</el-button>
				<el-button type="primary" @click="newRoleConfirm">确 定</el-button>
			</span>
		</el-dialog>

        <el-dialog title="编辑角色" :visible.sync="dialogEditRoleVisible" width="500px" append-to-body>
			<el-input placeholder="请输入角色名称" v-model="editRowName"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogEditRoleVisible = false" >取 消</el-button>
				<el-button type="primary" @click="updateRoleConfirm">确 定</el-button>
			</span>
		</el-dialog>

        <el-dialog title="编辑权限" :visible.sync="dialogEditPermission" append-to-body custom-class="role-edit">
            <div class="d-flex justify-content-around role-edit">
                <div class="module-select">
                    <div class="title">选择菜单</div>
                    <div class="list">
                        <ul>
                            <li v-for="(menu, index) of allPermissionList" :key="index">
                                <el-checkbox class="ml-3" v-model="menu._selected" @change="perMenuChange(menu)"></el-checkbox>
                                <span @click="selectPerMenu(menu)" style="cursor:pointer;">{{menu.name}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="btn">
                        <el-button type="primary" size="small" @click="selectAllMenu()">全选</el-button>
                        <el-button size="small" @click="selectAllMenu(true)">反选</el-button>
                    </div>
                </div>
                <div class="operate-select">
                    <div class="title">选择操作</div>
                    <div class="ml-3 pt-2" v-if="selectedPermissionMenu">{{selectedPermissionMenu.name}}</div>
                    <div class="list" v-if="selectedPermissionMenu">
                        <ul>
                            <li v-for="(operate, index) of selectedPermissionMenu._operation" :key="index">
                                <el-checkbox class="ml-3" v-model="operate._selected">{{operate.name}}</el-checkbox>
                            </li>
                        </ul>
                    </div>
                    <div class="btn">
                        <el-button type="primary" size="small" @click="selectAllOperation()">全选</el-button>
                        <el-button size="small" @click="selectAllOperation(true)">反选</el-button>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
				<el-button @click="dialogEditPermission = false" size="small">取 消</el-button>
				<el-button type="primary" @click="saveRolePermission" size="small">确 定</el-button>
			</span>
        </el-dialog>

	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

import RoleMixin from './../../mixins/role.mixin';
import PermissionMixin from './permission.mixin';
import BtnOperateMixin from './../../mixins/btnOperate.mixin';

	export default {
        name: 'SystemRoleList',
        mixins: [RoleMixin, PermissionMixin, BtnOperateMixin],
		data() {
			return {
				activeName: 'first',
                dialogNewRoleVisible: false,
                dialogEditRoleVisible: false,
                tableData: [],
                
                newRoleName: '',
                editRowName: '',
                editRole: null,

                fullscreenLoading: false,
                searchRole: '',
			}
        },
        created(){
            this.fetchRemote();
        },
		methods: {
            ...mapMutations({
                saveRoleList: 'commitRoleList'
            }),
            fetchRemote(){  // 加载所有的菜单和按钮
                this.getRoleRemote().then(response=>{
                    this.tableData = response;
                    this.saveRoleList(response);
                });
            },
			handleToEdit(row) {
                this.dialogEditRoleVisible = true;
                this.editRole = row;
                this.editRowName = row.roleName;
			},
			handleToDelete(row, index) {
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.fullscreenLoading = true;
                    this.$svHttp.httpDelete(this.$svHttp.Api.roleDel+row.roleCode)
                    .then(response=>{
                        if( response ) {
                            this.fullscreenLoading = false;
                            this.tableData.splice(index, 1);
                        }
                    });
				});
            },
            newRoleConfirm(){
                if( this.newRoleName.trim() === '' ) return this.$message({
                    type: 'warning',
                    message: '请填写角色名称'
                });
                this.fullscreenLoading = true;
                this.$svHttp.httpPost(this.$svHttp.Api.roleAdd, {
                   roleName: this.newRoleName
                }).then(response=>{
                    if( response ) {
                        this.dialogNewRoleVisible = false;
                        this.fullscreenLoading = false;
                        this.fetchRemote();
                    }
                });
            },
            updateRoleConfirm(){
                if( this.editRowName.trim() === '' ) return this.$message({
                    type: 'warning',
                    message: '请填写角色名称'
                });
                this.fullscreenLoading = true;
                this.$svHttp.httpPost(this.$svHttp.Api.roleUpdate, {
                    roleCode: this.editRole.roleCode,
                    roleName: this.editRowName
                }).then(response=>{
                    if( response ) {
                        this.dialogEditRoleVisible = false;
                        this.fullscreenLoading = false;
                        this.editRole.roleName = this.editRowName;
                    }
                });
            }
		}
	}

</script>

<style lang="scss" scoped>
	.search {
		height: 40px;
	}

	.table_list {
		overflow: auto;
	}

	.addFlat {
		top: 4px;
		right: 175px;
	}

    .role-edit{
        ul{list-style: none; padding-left: 0;}
        li{ margin: 10px 0; }
        .module-select, .operate-select{
            width: 300px;
            border: 1px solid #ddd;
            position: relative;
            padding-bottom: 50px;
        }
        .title{
            text-align: center;
            line-height: 30px;
            background: #eee;
        }
        .list{
            max-height: 400px;
            overflow: auto;
        }
        .btn{
            position: absolute;
            bottom: 0;
        }
    }
</style>
